{{extend './extend.art'}}
{{block 'title'}}Blog - Content Manager{{/block}}
{{block 'body'}}
<body>
    {{include './header.art'}}
    <!-- 主体内容 -->
    <div class = "content">
        {{include './aside.art'}}
        <div class = "main">
            <!-- 分类标题 -->
            <div class = "title">
                <h4>用户</h4>
                <span>找到{{count}}个用户</span>
                <a href = "/admin/user-edit" class = "btn btn-primary new">新增用户</a>
            </div>
            <!-- /分类标题 -->
            <!-- 内容列表 -->
            <table class = "table table-striped table-bordered table-hover custom-table">
                <thead>
                <tr>
                    <th>ID</th>
                    <th>用户名</th>
                    <th>邮箱</th>
                    <th>角色</th>
                    <th>状态</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>
                {{each result}}
                <tr>
                    <!-- 去掉id双引号的两个方法 1. 去掉使用toString方法  2. 使用 @ 原文输出 -->
                    <!--                    <td>{{$value._id.toString()}}</td>-->
                    <td>{{@$value._id}}</td>
                    <td>{{$value.name}}</td>
                    <td>{{$value.email}}</td>
                    <td>{{$value.role}}</td>
                    <td>{{$value.state}}</td>
                    <td>
                        <a href = "/admin/user-edit?id={{@$value._id}}" class = "glyphicon glyphicon-edit"></a>
                        <!-- 定义一个自定义属性 将id放到这个属性中去 -->
                        <i class = "glyphicon glyphicon-remove delete" data-toggle = "modal"
                           data-target = ".confirm-modal" data-id = "{{$value.id}}"></i>
                    </td>
                </tr>
                {{/each}}
                </tbody>
            </table>
            <!-- /内容列表 -->
            <!-- 分页 -->
            <ul class = "pagination">
                <li style = "display: <%= page==1?'none':'inline' %>">
                    <a href = "/admin/user?page=<%= page-1 %>">
                        <span>&laquo;</span>
                    </a>
                </li>
                <% for (var i = 0 ;i < total ;i++) {%>
                <li>
                    <!-- 居然可以将 <%=%> 直接写到字符串中去 -->
                    <a href = "/admin/user?page=<%=i+1%>"><%= i+1 %></a>
                </li>
                <%} %>
                <li style = "display: <%= page==total?'none':'inline'%> ">
                    <a href = "/admin/user?page=<%= page*1+1 %>">
                        <span>&raquo;</span>
                    </a>
                </li>
            </ul>
            <!-- /分页 -->
        </div>
    </div>
    <!-- /主体内容 -->
    <!-- 删除确认弹出框 -->
    <div class = "modal fade confirm-modal">
        <div class = "modal-dialog modal-lg">
            <form class = "modal-content" action = "/admin/delete" method = "get">
                <div class = "modal-header">
                    <button type = "button" class = "close" data-dismiss = "modal"><span>&times;</span></button>
                    <h4 class = "modal-title">请确认</h4>
                </div>
                <div class = "modal-body">
                    <p>您确定要删除这个用户吗?</p>
                    <!-- 要实现删除用户 就要把用户的id传给服务器 就可以在这里使用一个隐藏的 input 标签提交给服务器 -->
                    <input type = "hidden" name = "id">
                </div>
                <div class = "modal-footer">
                    <button type = "button" class = "btn btn-default" data-dismiss = "modal">取消</button>
                    <input type = "submit" class = "btn btn-primary" value = "确认删除">
                </div>
            </form>
        </div>
    </div>
    <!-- /删除确认弹出框 -->
    {{include './layout.art'}}
    <script>
      $('.delete').on('click', function () {
        let id = $(this).attr('data-id')
        document.querySelector('input[type=hidden]').value = id
        console.log(document.querySelector('input[type=hidden]').value)
      })
    </script>
</body>
{{/block}}